<template>
    <div class="app-container">
        <div class="app-container-main">
            <div class="main-card-header">
                广告列表
            </div>
            <div class="main-card-body">
                <div class="list-search">
                    <div class="list-options">
                        <a-select v-model:value="searchlist.status" style="width:100%" @change="handleSearchChange">
                            <a-select-option value='不限平台'>不限平台</a-select-option>
                            <a-select-option value='APP'>APP</a-select-option>
                            <a-select-option value='触屏版'>触屏版</a-select-option>
                            <a-select-option value='微信小程序'>微信小程序</a-select-option>
                            <a-select-option value='PC端'>PC端</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time" style="width:100%" @change="handleSearchChange">
                            <a-select-option value='不限广告位'>不限广告位</a-select-option>
                            <a-select-option value='限广告位'>限广告位</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time_day" style="width:100%"
                            @change="handleSearchChange">
                            <a-select-option value='不限显示状态'>不限显示状态</a-select-option>
                            <a-select-option value='显示'>显示</a-select-option>
                            <a-select-option value='隐藏'>隐藏</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time_source" style="width:100%"
                            @change="handleSearchChange">
                            <a-select-option value='不限到期时间'>不限到期时间</a-select-option>
                            <a-select-option value='已经到期'>已经到期</a-select-option>
                            <a-select-option value='3天内'>3天内</a-select-option>
                            <a-select-option value='一周内'>一周内</a-select-option>
                        </a-select>
                    </div>
                </div>
                <div class="table">
                    <a-table :columns="columns" :data-source="data" :row-selection="rowSelection"
                         :pagination="false">
                        <template #status="{ record }">
                            <a-tag color="green" v-if="record.status === true">显示</a-tag>
                            <a-tag color="red" v-else>隐藏</a-tag>
                        </template>
                        <template #action="{ record }">
                            <a-button type="primary" @click='edit()'>修改</a-button>
                            <a-button type="primary">删除</a-button>
                        </template>
                    </a-table>
                </div>
                <div class="row">
                    <div class="row-button">
                        <a-button type="primary"  @click='add()'>添加广告</a-button>
                        <a-button type="primary" danger>删除所选</a-button>
                    </div>
                    <div class="row-pagination">
                        <a-pagination v-model:current="current1" show-quick-jumper :total="1"
                            :show-total="total => `Total ${total} items`" @change="onChange" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive } from "vue"
import { HomeOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue';
import { useRouter } from "vue-router"

export default defineComponent({
    components: {
        HomeOutlined
    },
    computed: {

    },
    emits: [],
    props: {
    },
    setup() {
// 获取到的路由参数
        const router = useRouter(); //获取到值

        const searchlist = reactive({
            status: '不限平台',
            reg_time: '不限广告位',
            reg_time_day: '不限显示状态',
            reg_time_source: '不限到期时间',
        });


        
        const current1 = ref(2);

        const onChange = (number) => {
            console.log('Page: ', pageNumber);
        };

        const add = () => {
            router.push('/content/advertisinglist/add')
        }
        const edit = () => {
            router.push('/content/advertisinglist/edit')
        }

        const rowSelection = ref({
            checkStrictly: false,
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        });

        const handleSearchChange = () => {

        }

        
        onMounted(() => {

        })
        const columns = [{
            title: '广告标题',
            width: '130px',
            dataIndex: 'title',
            key: 'title',
        }, {
            title: ' 所属平台',
            dataIndex: 'pingtai',
            key: 'pingtai',
        }, {
            title: '所属广告位',
            dataIndex: 'weizhi',
            width: '130px',
            key: 'weizhi',
        }, {
            title: '开始时间',
            dataIndex: 'bagin_time',
            key: 'bagin_time',
            width: 200,
        }, {
            title: '到期时间',
            dataIndex: 'last_time',
            key: 'last_time',
            width: 200,

        }, {
            title: '排序',
            dataIndex: 'sort',
            key: 'sort',
            // slots: { customRender: 'status' },
        }, {
        }, {
            title: '是否显示',
            dataIndex: 'status',
            key: 'status',
            slots: { customRender: 'status' },
        }, {
            title: '操作',
            key: 'action',
            // fixed: 'right',
            width: 200,
            slots: { customRender: 'action' },
        }];
        const data = [{
            key: '1',
            title: '首页通栏',
            pingtai: '触屏版',
            weizhi: '首页通栏A区',
            bagin_time: '2022-12-02 14:23',
            last_time: '2023-12-02 15:46',
            sort:0,
            status: true,
        },{
            key: '2',
            title: '企业会员',
            pingtai: 'PC版',
            weizhi: '企业会员A区',
            bagin_time: '2022-01-02 14:23',
            last_time: '2023-12-02 15:46',
            sort:0,
            status: false,
        }
        ];
        return {
            searchlist,
            data,
            columns,
            current1,
            add,
            edit,
            onChange,
            handleSearchChange,
            rowSelection
        }
    }
})
</script>

<style scoped>

</style>